<template>
	<view
		class="w-full box-border flex justify-center items-center flex-col"
		:style="{ height: height || contentHeight + 'rpx' }"
	>
		<image :src="baseImg + '/class-login.png'" class="w-[352rpx] h-[317rpx]"></image>
		<view class="w-full flex justify-center items-center flex-col mt-8">
			<text class="text-[#474747] text-[32rpx]">{{ title }}</text>
			<text class="text-[28rpx] text-[#ABABAB] mt-2">{{ subTitle }}</text>
			<block v-if="type === 'btn'">
				<view
					v-if="!$slots.default"
					@tap="retry"
					style="background-color: #32a2e3"
					class="mt-4 w-[392rpx] rounded-[50rpx] h-[101rpx] flex justify-center items-center text-[#fff] text-[32rpx]"
					>{{ btnTitle }}</view
				>
				<slot v-else></slot>
			</block>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();

const emit = defineEmits(['click']);
withDefaults(
	defineProps<{
		title?: string;
		subTitle?: string;
		btnTitle?: string;
		height?: string;
		type?: string;
	}>(),
	{
		title: '服务器异常~',
		subTitle: '',
		btnTitle: '重试',
		height: '',
		type: 'msg', // btn
	},
);

const retry = () => {
	emit('click');
};
</script>

<style lang="scss" scoped></style>
